<template>
    <div class="pull-up-window" :style="{ height: windowHeight + 'px' }">
        <!-- 方块 -->
        <div class="rental-rectangular" @click="handleWindowHeightChange">
        </div>
        <!-- 滑动浏览 -->
        <div class="slide-browse">
            <!-- 租币当钱花 -->
            <TopSection />
            <!-- 租物推荐模块 -->
            <RecommendationSection />
        </div>
    </div>

</template>
<script setup lang="ts">
import TopSection from './TopSection.vue'
import RecommendationSection from './RecommendationSection.vue'
import { ref, onMounted } from 'vue'

// 获取屏幕高度，兼容小屏幕手机
const getScreenHeight = () => {
    const screenHeight = window.innerHeight
    // 最小高度限制为屏幕高度的50%，确保在小屏幕上也能正常显示
    const minHeight = Math.floor(screenHeight * 0.5)
    // 最大高度限制为屏幕高度的90%，避免完全覆盖屏幕
    const maxHeight = Math.floor(screenHeight * 0.8)
    return {
        minHeight,
        maxHeight,
        // 默认高度设置为屏幕高度的60%，是一个合理的默认值
        defaultHeight: Math.floor(screenHeight * 0.55)
    }
}

// 响应式窗口高度变量
const screenDimensions = ref(getScreenHeight())
const windowHeight = ref(screenDimensions.value.defaultHeight) // 默认高度为屏幕的60%

// 处理窗口高度变化（点击事件）
const handleWindowHeightChange = () => {
    // 切换高度，在默认高度和最大高度之间切换
    windowHeight.value = windowHeight.value === screenDimensions.value.defaultHeight 
        ? screenDimensions.value.maxHeight 
        : screenDimensions.value.defaultHeight
}

// 在窗口大小改变时重新计算屏幕高度
const handleResize = () => {
    const newDimensions = getScreenHeight()
    screenDimensions.value = newDimensions
    // 如果当前高度大于新的最大高度，则调整为新的最大高度
    if (windowHeight.value > newDimensions.maxHeight) {
        windowHeight.value = newDimensions.maxHeight
    }
    // 如果当前高度小于新的最小高度，则调整为新的默认高度
    if (windowHeight.value < newDimensions.minHeight) {
        windowHeight.value = newDimensions.defaultHeight
    }
}

// 组件挂载时添加窗口大小改变的监听
onMounted(() => {
    window.addEventListener('resize', handleResize)
    // 组件卸载时移除监听
    return () => {
        window.removeEventListener('resize', handleResize)
    }
})
</script>
<style scoped lang="scss">
.pull-up-window {
    z-index: 1000;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 25px 25px 0px 0px;
    transition: height 0.3s ease;
    display: flex;
    flex-direction: column;

    .rental-rectangular {
        width: 31px;
        height: 5px;
        margin: 10px auto;
        background-color: #E2E2E2;
        border-radius: 3px;
        cursor: pointer;
    }

    .slide-browse {
        overflow-y: scroll;
        flex: 1;
    }

    /* 为根元素添加flex布局 */
    :deep(.pull-up-window > div) {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}
</style>
